<template>
  <div class="third-comp">
    <div class="left">
      <el-card shadow="hover">
        <template #header>
          <h2>关键词搜索</h2>
        </template>
        <template #default>
          <div class="main">
            <div class="charts">
              <div class="left-chart">
                <div class="title">搜索用户量</div>
                <div class="number">{{ userNum }}</div>
                <v-chart :option="userOption"></v-chart>
              </div>
              <div class="right-chart">
                <div class="title">搜索量</div>
                <div class="number">{{ searchNum }}</div>
                <v-chart :option="searchOption"></v-chart>
              </div>
            </div>
            <div class="table">
              <el-table :data="pageData">
                <el-table-column label="排名" prop="rank"></el-table-column>
                <el-table-column
                  label="关键词"
                  prop="keyWord"
                ></el-table-column>
                <el-table-column
                  label="总搜索量"
                  prop="totalSearch"
                ></el-table-column>
                <el-table-column
                  label="搜索用户数"
                  prop="totalUser"
                ></el-table-column>
              </el-table>
              <el-pagination
                background
                layout="prev, pager, next"
                :page-size="6"
                :total="tableData.length"
                @current-change="handleCurrentChange"
              />
            </div>
          </div>
        </template>
      </el-card>
    </div>
    <div class="right">
      <el-card shadow="hover">
        <template #header>
          <h2>热门搜索</h2>
          <el-radio-group v-model="type" @change="handleChange">
            <el-radio-button label="品类" value="category"></el-radio-button>
            <el-radio-button label="商品" value="product"></el-radio-button>
          </el-radio-group>
        </template>
        <template #default>
          <v-chart :option="categoryOption"></v-chart>
        </template>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from "vue";

import { getKeywordsData, getCategoryData } from "@/api/index.js";

const tableData = ref([]);
const categoryData = ref([]);
const page = ref(1); // 当前页码
const userOption = ref({}); // 用户量图表配置
const searchOption = ref({}); // 搜索量图表配置
const categoryOption = ref({}); // 分类搜索图表配置
const type = ref("category"); // 热门搜索类型

const pageData = computed(() => {
  // 根据当前页, 计算当前页要显示的数据
  const start = (page.value - 1) * 6;
  const end = start + 6;

  return tableData.value.slice(start, end);
});
// 总用户量
const userNum = computed(() => {
  return tableData.value.reduce((acc, cur) => acc + cur.totalUser, 0);
});
// 总搜索量
const searchNum = computed(() => {
  return tableData.value.reduce((acc, cur) => acc + cur.totalSearch, 0);
});

const handleCurrentChange = (value) => {
  page.value = value;
};

const renderLineChart = (chartOption, data) => {
  chartOption.value = {
    xAxis: {
      type: "category",
      show: false,
      boundaryGap: false,
    },
    yAxis: {
      show: false,
    },
    grid: {
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
    },
    series: {
      type: "line",
      data: data,
      areaStyle: {
        color: "skyblue",
      },
      itemStyle: {
        opacity: 0,
      },
      smooth: true,
    },
  };
};

const renderCategoryChart = (data) => {
  const _data = data.map((item) => {
    return {
      ...item,
      // 添加一个name属性
      name: `${item.title} | ${item.value}`,
    };
  });
  const total = data.reduce((acc, cur) => acc + cur.value, 0);
  categoryOption.value = {
    title: [
      {
        text: "品类分布",
        textStyle: {
          fontSize: 14,
          color: "#666",
        },
      },
      {
        text: "累计订单量",
        subtext: total,
        textAlign: "center",
        x: "40%",
        y: "45%",
        textStyle: {
          fontSize: 14,
          color: "#999",
        },
        subtextStyle: {
          fontSize: 28,
          color: "#333",
        },
      },
    ],
    tooltip: {
      formatter(params) {
        // console.log(params)
        // seriesName要求series中必须有name属性
        const res = `
            ${params.seriesName}<br>
            ${params.marker} ${params.data.title} <br>
            ${params.marker} 销售额: ${params.data.value} <br>
          `;
        return res;
      },
    },
    legend: {
      // legend要求series的data数组中对象必须有name属性
      orient: "vertical",
      left: "80%",
      top: "top",
      textStyle: {
        color: "#888",
      },
    },
    series: {
      type: "pie",
      name: "品类分布",
      data: _data,
      radius: ["45%", "60%"], // 饼图的半径[内半径，外半径]
      center: ["40%", "50%"], // 饼图的中心坐标
      label: {
        position: "outside",
        formatter(params) {
          // console.log(params)
          return params.data.title;
        },
      },
      itemStyle: {
        borderWidth: 8,
        borderColor: "#fff",
      },
    },
  };
};

const handleChange = () => {
  if (type.value === "category") {
    renderCategoryChart(categoryData.value.data1);
  } else if (type.value == "product") {
    renderCategoryChart(categoryData.value.data2);
  }
};

onMounted(async () => {
  tableData.value = await getKeywordsData();
  categoryData.value = await getCategoryData();
  // console.log(tableData.value)

  // 由于接口返回的数据格式不是我们希望, 因此需要对原始数据进行加工处理
  const userData = tableData.value
    .map((item) => item.totalUser)
    .slice(0, 10)
    .reverse();

  const searchData = tableData.value
    .map((item) => item.totalSearch)
    .slice(0, 10)
    .reverse();

  renderLineChart(userOption, userData);
  renderLineChart(searchOption, searchData);

  renderCategoryChart(categoryData.value.data1);
});
</script>

<style lang="scss" scoped>
.third-comp {
  margin-top: 20px;
  display: flex;
  gap: 20px;
  .left {
    flex: 1;
    h2 {
      font-weight: 600;
    }
    :deep(.el-card__body) {
      min-height: 502px;
      .main {
        padding: 20px;
        .charts {
          display: flex;
          gap: 20px;
          .left-chart,
          .right-chart {
            flex: 1;
            .title {
              font-size: 14px;
              color: #727171;
            }
            .number {
              margin-top: 10px;
              font-size: 20px;
              font-weight: 600;
            }
            // v-chart设置的默认样式
            .echarts {
              height: 50px;
            }
          }
        }
        .table {
          .el-pagination {
            margin-top: 16px;
            display: flex;
            justify-content: end;
          }
        }
      }
    }
  }
  .right {
    flex: 1;
    :deep(.el-card__header) {
      position: relative;
      h2 {
        font-weight: 600;
      }
      .el-radio-group {
        position: absolute;
        top: 10px;
        right: 20px;
      }
    }
    :deep(.el-card__body) {
      height: 502px;
    }
  }
}
</style>
